<template>
	<view class="mainpadding beijingse1">
		<!-- 分类 -->
		<view class="flexleft">
			<!-- 左侧 -->
			<view class="left_box">
				<view class="weixbox" :class="currentclassid==item.id?'xuanzbox':'weixbox'" v-for="item in leftList" :key="item.id" @click="changeleftid(item.id)">{{item.name}}</view>
			</view>
			<!-- 右侧 -->
			<scroll-view scroll-y="true"  @scrolltolower="onReachBottomt"
				refresher-threshold="100" class="rightbox">
				<view class="flexbetween margin_top" v-for="item in list.data" :key="item.id" @click="tzsoxq(item.id)">
					<view class="shilitu">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="ershiba xiankuan xiaohei">{{item.name}}</view>
						<view class="smalltext xiaocheng fonweight margin_top2">¥
							<text class="ershiba xiaocheng fonweight">{{item.price}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				leftList:[],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				currentclassid:"",
			}
		},
		onLoad() {
			this.getleftList()
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "好物商城",
				path: "pages/homepage?code=" + uni.getStorageSync("invite_code"),
			}
		},
		onShareTimeline: function() {
			return {
				title: "好物商城",
				path: "pages/homepage?code=" + uni.getStorageSync("invite_code"),
			}
		},
		methods: {
			getleftList() { 
				httpRequest.request('/api/goods/goodsCategory', 'GET', {
				}).then(res => {
					this.leftList = res.data
					this.currentclassid = res.data[0].id
					this.init()
				}).catch(err => {})
			},
			changeleftid(id){
				if(this.currentclassid==id){
					return false
				}
				this.currentclassid = id
				this.init()
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goods/goodsIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					category_id:this.currentclassid
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottomt() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tzsoxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpinxq?ly=1&id='+id+"&ishome=1"
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpinxq?id=' + id
				})
			},
			chengeClass(item) {
				if (this.classId == item.id) {
					return false
				}
				this.classId = item.id
				this.getshoplist()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.shilitu {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		image {
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			width: 100%;
			height: 100%;
		}
	}

	.beijingse1 {
		background-color: #f5f5f5;
		min-height: calc(100vh - 60rpx);
		height: auto;
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 4rpx solid #f57d41;
		font-size: 24rpx;
		background-color: #fff;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.rightbox {
		position: fixed;
		left: 175rpx;
		top: 0rpx;
		padding: 5rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 74%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.left_box {
		position: fixed;
		left: 0;
		top: 0rpx;
		width: 23%;
		height: 100vh;
		overflow-y: auto;
		background: #F9F9F8;
		box-sizing: border-box;
	}

	.lline {
		width: 1rpx;
		height: 35rpx;
		background-color: #DDDDDD;
	}
</style>